import React from 'react';
import { View, Image, Platform, StatusBar, StyleSheet, TouchableOpacity, Text, DeviceEventEmitter, } from 'react-native';

import NavigatorHome from '../NavigatorHome/NavigatorHome'
import NavigatorContact from '../NavigatorContact/NavigatorContact'
import NavigatorMap from '../NavigatorMap/NavigatorMap'
import NavigatorMsg from '../NavigatorMsg/NavigatorMsg'
import NavigatorUser from '../NavigatorUser/NavigatorUser'

import PageWtsbList from '../PageWtsbList/PageWtsbList'
import PageWtsbDetail from '../PageWtsbDetail/PageWtsbDetail'

import PageKssbList from '../PageKssbList/PageKssbList'

import PageXchsList from '../PageXchsList/PageXchsList'
import PageXchsDetail from '../PageXchsDetail/PageXchsDetail'
import PageXchsHandle from '../PageXchsHandle/PageXchsHandle'

import PageXchcList from '../PageXchcList/PageXchcList'
import PageXchcDetail from '../PageXchcDetail/PageXchcDetail'
import PageXchcHandle from '../PageXchcHandle/PageXchcHandle'

import PageLddbList from '../PageLddbList/PageLddbList'
import PageLddbDetail from '../PageLddbDetail/PageLddbDetail'
import PageLddbHandle from '../PageLddbHandle/PageLddbHandle'

import PageBjgxAdd from '../PageBjgxAdd/PageBjgxAdd'
import PageBjgxEdit from '../PageBjgxEdit/PageBjgxEdit'

import PageAjclList from '../PageAjclList/PageAjclList'
import PageAjclDetail from '../PageAjclDetail/PageAjclDetail'
import PageAjclHandle from '../PageAjclHandle/PageAjclHandle'

import PageAjzpList from '../PageAjzpList/PageAjzpList'
import PageAjzpDetail from '../PageAjzpDetail/PageAjzpDetail'
import PageAjzpHandle from '../PageAjzpHandle/PageAjzpHandle'
import PageAjzpSelect from '../PageAjzpSelect/PageAjzpSelect'

import PageLsajList from '../PageLsajList/PageLsajList'
import PageLsajDetail from '../PageLsajDetail/PageLsajDetail'
import PageKsczDetail from '../PageKsczDetail/PageKsczDetail'

import PageSearchList from '../PageSearchList/PageSearchList'
import MessageDetail from '../MessageDetail/MessageDetail'

import PageTypeBigSelect from '../PageTypeBigSelect/PageTypeBigSelect'
import PageTypeSmallSelect from '../PageTypeSmallSelect/PageTypeSmallSelect'
import PageTypeLawSelect from '../PageTypeLawSelect/PageTypeLawSelect'

import PageFwcj from '../PageFwcj/PageFwcj'  //汉阴房屋采集
import PageFwcjDetail from '../PageFwcjDetail/PageFwcjDetail'  //汉阴房屋采集

import PageLwpc from '../PageLwpc/PageLwpc'  //延长房屋采集
import PageLwpcAdd from '../PageLwpcAdd/PageLwpcAdd'  //延长房屋采集
import PageLwpcSubList from '../PageLwpcSubList/PageLwpcSubList'  //延长房屋采集
import PageLwpcSubAdd from '../PageLwpcSubAdd/PageLwpcSubAdd'  //延长房屋采集

import WebPage from '../WebPage/WebPage'

import UserClock from '../UserClock/UserClock'
import UserHelp from '../UserHelp/UserHelp'
import UserDetail from '../UserDetail/UserDetail'
import UserCaseChart from '../UserCaseChart/UserCaseChart'
import UserCaseSearch from '../UserCaseSearch/UserCaseSearch'
import UserChangePassword from '../UserChangePassword/UserChangePassword'

import UserFindPassword from '../UserFindPassword/UserFindPassword'
import UserLogin from '../UserLogin/UserLogin'

import PageTest from '../PageTest/PageTest'

import Templates from '../Templates/Templates'

import { StackNavigator, TabNavigator } from 'react-navigation'
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'
import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'

const TransitionConfiguration = () => ({
    screenInterpolator: (sceneProps) =>
    {
        const {scene} = sceneProps;
        const {route} = scene;
        const params = route.params || {};
        const transition = params.transition || 'forHorizontal';
        return CardStackStyleInterpolator[transition](sceneProps);
    },
});

export default class Main extends React.Component
{
    constructor(props)
    {
        super(props);
        if (Platform.OS == 'android')
        {
            StatusBar.setBackgroundColor(ColorUtils.blue, true);
            StatusBar.setTranslucent(false);
            StatusBar.setBarStyle('light-content');
            StatusBar.setHidden(false)
        }
    }

    render()
    {
        return (<Navigator/>);
    }
}

const Tabs = TabNavigator({
        NavigatorHome: {
            screen: NavigatorHome,
            navigationOptions: {  // 也可以写在组件的static navigationOptions内
                tabBarLabel: '应用',
                headerTitle: '应用中心',
                headerStyle: {
                    backgroundColor: ColorUtils.blue,
                    height: ScreenUtils.statusBarHeight,
                },
                headerTintColor: ColorUtils.white,
                headerTitleStyle: {
                    fontSize: ScreenUtils.Font_18,
                    color: ColorUtils.white,
                    fontWeight: 'normal',
                    flex: 1,
                    alignSelf: 'center',
                    textAlign: 'center',
                },
                tabBarIcon: ({tintColor, focused}) => (focused
                    ?
                    <Image source={require('../img/nav_home_selected.png')} style={styles.icon}/>
                    :
                    <Image source={require('../img/nav_home.png')}
                           style={[{tintColor: tintColor}, styles.icon]}/>)
            }
        },
        NavigatorMsg: {
            screen: NavigatorMsg,
            navigationOptions: {
                tabBarLabel: '消息',
                headerTitle: '消息',
                headerStyle: {
                    backgroundColor: ColorUtils.blue,
                    height: ScreenUtils.statusBarHeight,
                },
                headerTintColor: ColorUtils.white,
                headerTitleStyle: {
                    fontSize: ScreenUtils.Font_18,
                    color: ColorUtils.white,
                    fontWeight: 'normal',
                    flex: 1,
                    alignSelf: 'center',
                    textAlign: 'center',
                },
                headerLeft: <View/>,
                headerRight: (
                    <TouchableOpacity onPress={() =>
                    {
                        DeviceEventEmitter.emit('msgReload', 'param');
                    }}>
                        <Image style={{width: 20, height: 20, marginRight: 16}} source={require('../img/refresh.png')}/>
                    </TouchableOpacity>
                ),
                tabBarIcon: ({tintColor, focused}) => (focused
                    ?
                    <Image source={require('../img/nav_msg_selected.png')} style={styles.icon}/>
                    :
                    <Image source={require('../img/nav_msg.png')}
                           style={[{tintColor: tintColor}, styles.icon]}/>)
            }
        },
        NavigatorContact: {
            screen: NavigatorContact,
            navigationOptions: {
                tabBarLabel: '通讯录',
                headerTitle: '通讯录',
                headerStyle: {
                    backgroundColor: ColorUtils.blue,
                    height: ScreenUtils.statusBarHeight,
                },
                headerLeft: <View/>,
                headerRight: <View/>,
                headerTintColor: ColorUtils.white,
                headerTitleStyle: {
                    fontSize: ScreenUtils.Font_18,
                    color: ColorUtils.white,
                    fontWeight: 'normal',
                    flex: 1,
                    alignSelf: 'center',
                    textAlign: 'center',
                },
                tabBarIcon: ({tintColor, focused}) => (focused
                    ?
                    <Image source={require('../img/nav_contact_selected.png')} style={styles.icon}/>
                    :
                    <Image source={require('../img/nav_contact.png')}
                           style={[{tintColor: tintColor}, styles.icon]}/>)
            }
        },
        NavigatorMap: {
            screen: NavigatorMap,
            navigationOptions: {
                tabBarLabel: '地图',
                headerTitle: '地图',
                headerStyle: {
                    backgroundColor: ColorUtils.blue,
                    height: ScreenUtils.statusBarHeight,
                },
                headerLeft: <View/>,
                headerRight: <View/>,
                headerTintColor: ColorUtils.white,
                headerTitleStyle: {
                    fontSize: ScreenUtils.Font_18,
                    color: ColorUtils.white,
                    fontWeight: 'normal',
                    flex: 1,
                    alignSelf: 'center',
                    textAlign: 'center',
                },
                tabBarIcon: ({tintColor, focused}) => (focused
                    ?
                    <Image source={require('../img/nav_map_selected.png')} style={styles.icon}/>
                    :
                    <Image source={require('../img/nav_map.png')}
                           style={[{tintColor: tintColor}, styles.icon]}/>)
            }
        },
        NavigatorUser: {
            screen: NavigatorUser,
            navigationOptions: {
                header: null,
                tabBarLabel: '个人',
                headerTitle: '个人',
                headerStyle: {
                    backgroundColor: ColorUtils.blue,
                    height: ScreenUtils.statusBarHeight,
                },
                headerLeft: <View/>,
                headerRight: <View/>,
                headerTintColor: ColorUtils.white,
                headerTitleStyle: {
                    fontSize: ScreenUtils.Font_18,
                    color: ColorUtils.white,
                    fontWeight: 'normal',
                    flex: 1,
                    alignSelf: 'center',
                    textAlign: 'center',
                },
                tabBarIcon: ({tintColor, focused}) => (focused
                    ?
                    <Image source={require('../img/nav_user_selected.png')} style={styles.icon}/>
                    :
                    <Image source={require('../img/nav_user.png')}
                           style={[{tintColor: tintColor}, styles.icon]}/>)
            }
        },
    },
    {
        initialRouteName: 'NavigatorHome',//初始化哪个Tab页NavigatorLoan面
        animationEnabled: true, // 切换页面时是否有动画效果
        lazy: true,//延迟加载，点击哪个加载哪个
        tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
        swipeEnabled: false, // 是否可以左右滑动切换tab
        backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
        tabBarOptions: {
            activeTintColor: ColorUtils.blue, // 文字和图片选中颜色
            inactiveTintColor: ColorUtils.gray, // 文字和图片未选中颜色
            showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
            indicatorStyle: {
                height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
            },
            style: {
                backgroundColor: '#fff', // TabBar 背景色
                height: 50,
            },
            iconStyle: {
                margin: -2,
                padding: 0
            },
            labelStyle: {
                fontSize: ScreenUtils.Font_12, // 文字大小
                margin: 0,
                padding: 2
            },
        },
    });

const Navigator = StackNavigator(
    {
        Tab: {screen: Tabs},
        UserDetail: {screen: UserDetail},
        UserChangePassword: {screen: UserChangePassword},
        UserCaseChart: {screen: UserCaseChart},
        UserCaseSearch: {screen: UserCaseSearch},
        //问题上报
        PageWtsbList: {screen: PageWtsbList},
        PageWtsbDetail: {screen: PageWtsbDetail},
        //快速上报
        PageKssbList: {screen: PageKssbList},
        //现场核实
        PageXchsList: {screen: PageXchsList},
        PageXchsDetail: {screen: PageXchsDetail},
        PageXchsHandle: {screen: PageXchsHandle},
        //现场核查
        PageXchcList: {screen: PageXchcList},
        PageXchcDetail: {screen: PageXchcDetail},
        PageXchcHandle: {screen: PageXchcHandle},
        PageSearchList: {screen: PageSearchList},
        //领导督办
        PageLddbList: {screen: PageLddbList},
        PageLddbDetail: {screen: PageLddbDetail},
        PageLddbHandle: {screen: PageLddbHandle},
        //部件更新
        PageBjgxAdd: {screen: PageBjgxAdd},
        PageBjgxEdit: {screen: PageBjgxEdit},
        //案件处理
        PageAjclList: {screen: PageAjclList},
        PageAjclDetail: {screen: PageAjclDetail},
        PageAjclHandle: {screen: PageAjclHandle},
        //案件指派
        PageAjzpList: {screen: PageAjzpList},
        PageAjzpDetail: {screen: PageAjzpDetail},
        PageAjzpHandle: {screen: PageAjzpHandle},
        PageAjzpSelect: {screen: PageAjzpSelect},
        //历史案件
        PageLsajList: {screen: PageLsajList},
        PageLsajDetail: {screen: PageLsajDetail},
        PageKsczDetail: {screen: PageKsczDetail},
        //选择大类小类
        PageTypeBigSelect: {screen: PageTypeBigSelect},
        PageTypeSmallSelect: {screen: PageTypeSmallSelect},
        PageTypeLawSelect: {screen: PageTypeLawSelect},
        //房屋采集
        PageFwcj: {screen: PageFwcj},
        PageFwcjDetail: {screen: PageFwcjDetail},

        PageLwpc: {screen: PageLwpc},
        PageLwpcAdd: {screen: PageLwpcAdd},
        PageLwpcSubList: {screen: PageLwpcSubList},
        PageLwpcSubAdd: {screen: PageLwpcSubAdd},

        PageTest: {screen: PageTest},
        MessageDetail: {screen: MessageDetail},
        WebPage: {screen: WebPage},
        UserLogin: {screen: UserLogin},
        UserHelp: {screen: UserHelp},
        UserClock: {screen: UserClock},
        UserFindPassword: {screen: UserFindPassword},

        Templates: {screen: Templates},

    },
    {
        navigationOptions: {
            headerBackTitle: null,
            headerTintColor: '#333333',
            showIcon: true,
        },
        headerMode: 'screen',
        transitionConfig: TransitionConfiguration,
    }
);

const styles = StyleSheet.create({
    icon: {
        width: 24,
        height: 22,
    }
});


